<div id="touchui_settings_dialog" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="touch_settings_dialog" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">&times;</button>
		<h3 id="settings_dialog_label">{{ _('TouchUI Settings') }}</h3>
	</div>
	<div class="modal-body">
		<form>
			<div class="btn-box" data-bind="visible: !settings.hasBootloader">
				<button class="btn btn-primary" data-bind="click: bindings.toggleTouch">{{ _('Toggle TouchUI') }}</button>
				<span class="label" data-bind="text: isActive() ? '{{ _('Active') }}' : '{{ _('Inactive') }}', css: isActive() ? 'label-success' : 'label-danger'"></span>
			</div>
			<div class="btn-box">
				<button class="btn btn-primary" data-bind="click: bindings.toggleKeyboard, disable: !isActive()">{{ _('Toggle Virtual Keyboard') }}</button>
				<span class="label" data-bind="text: components.keyboard.isActive() ? '{{ _('Active') }}' : '{{ _('Inactive') }}', css: components.keyboard.isActive() ? 'label-success' : 'label-danger'"></span>
			</div>
			<div class="btn-box">
				<button class="btn btn-primary" data-bind="click: bindings.toggleHidebar, disable: !isActive()">{{ _('Toggle hide navigation bar') }}</button>
				<span class="label" data-bind="text: animate.isHidebarActive() ? '{{ _('Active') }}' : '{{ _('Inactive') }}', css: animate.isHidebarActive() ? 'label-success' : 'label-danger'"></span>
			</div>
			<div class="btn-box" data-bind="visible: settings.hasFullscreen">
				<button class="btn btn-primary" data-bind="click: bindings.toggleFullscreen">{{ _('Toggle fullscreen') }}</button>
				<span class="label" data-bind="text: settings.isFullscreen() ? '{{ _('Active') }}' : '{{ _('Inactive') }}', css: settings.isFullscreen() ? 'label-success' : 'label-danger'"></span>
			</div>
			<div class="btn-box">
				<button class="btn btn-primary" data-bind="click: bindings.toggleTouchscreen, disable: !isActive()">{{ _('Toggle touchscreen mode') }}</button>
				<span class="label" data-bind="text: settings.isTouchscreen() ? '{{ _('Active') }}' : '{{ _('Inactive') }}', css: settings.isTouchscreen() ? 'label-success' : 'label-danger'"></span>
			</div>
			<div class="btn-box" data-bind="visible: settings.isTouchscreen">
				<button class="btn btn-primary" data-bind="click: function() { window.location.reload(); }">{{ _('Refresh TouchUI') }}</button>
			</div>
		</form>

	</div>
	<div class="modal-footer">
		<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</button>
	</div>
</div>
